<template>
    <div class="products-media">
        <div class="product-medis-slider relative">
            <swiper :options="swiperOption" :not-next-tick="true" ref="mediaSwiper" class="swiper-media-container">
                <swiper-slide v-for="(item,index) in items.sliders" :key="index">
                    <img class="img-responsive center-block" :src="item">
                </swiper-slide>
            </swiper>
            <div class="swiper-pagination visible-xs visible-sm"></div>
        </div>
        <div class="product-medis-thumbs visible-md visible-lg">
            <p>Available colors</p>
            <ul class="list-inline">
                <li v-for="(item,index) in items.thumbSliders" :key="index" :class="{'active':index===thumbs_active}">
                    <a href="javascript:;" @click="setSwiper(index)">
                        <img class="img-responsive" :src="item">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    data() {
        return {
            thumbs_active: 0,
            swiperOption: {
                pagination: '.product-medis-slider .swiper-pagination',
                paginationClickable: true,
                grabCursor: true,
                loop: false,
                onSlideChangeEnd: (swiper) => {
                    this.thumbs_active = swiper.activeIndex
                }
            }
        }
    },
    props: ['items'],
    computed: {
        swiperMedia() {
            return this.$refs.mediaSwiper.swiper
        }
    },
    methods: {
        setSwiper(index) {
            this.swiperMedia.slideTo(index, 0, false)
            this.thumbs_active = index
        }
    }
}
</script>
<style scoped>
.product-medis-slider img {
    width: 100%;
    max-width: 1100px;
}

@media (max-width: 991px) {
    .products-media {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
    }
    .product-medis-slider {
        padding: 0 6%;
    }
}

@media (max-width: 480px) {
    .product-medis-thumbs li {
        width: 80px;
    }
    .product-medis-thumbs li img {
        width: 100%;
        height: auto;
    }
}
</style>
